<template>
	<view>
		<view style="height: 244upx;"></view>
		<view class="top flex align-center justify-center justify-between">
			<view></view>
			<view class="top-search flex align-center justify-between">
				<input @click="toSearch" placeholder="输入关键字..." />
				<text class="lg text-gray cuIcon-search"></text>
			</view>
			<image @click="changeList" v-if="changePattern" src="/static/change1.png"></image>
			<image  @click="changeList" v-else src="/static/change2.png"></image>
		</view>
		<view></view>
		<view class="shaixuan flex align-center justify-around">
			<view @click="setsort('sale')"><text>销量</text><image src="/static/b4.png" v-if="sort==4"></image><image src="/static/b4_1.png" v-if="sort==5"></image></view>
			<view @click="setsort('time')"><text>时间</text><image src="/static/b4.png" v-if="sort==6"></image><image src="/static/b4_1.png" v-if="sort==7"></image></view>
			<view @click="setsort('price')" class="align-center flex justify-center">
				<text>价格</text><image src="/static/b4.png" v-if="sort==2"></image><image src="/static/b4_1.png" v-if="sort==3"></image>
			</view>
		</view>
		<view class="select flex justify-around">
			<view @click="select(0)" :class="selectInd==0?'select-action':''"  class="select-item flex justify-center">
				<text>分类</text>
				<text v-if="selectInd==0" class="lg text-gray cuIcon-fold"></text>
				<text v-else class="lg text-gray cuIcon-unfold"></text>
			</view>
			<view @click="select(1)" :class="selectInd==1?'select-action':''" class="select-item flex justify-center">
				<text>价格</text>
				<text v-if="selectInd==1" class="lg text-gray cuIcon-fold"></text>
				<text v-else class="lg text-gray cuIcon-unfold"></text>
			</view>
			<view @click="select(2)"  :class="selectInd==2?'select-action':''" class="select-item flex justify-center">
				<text>品牌</text>
				<text v-if="selectInd==2" class="lg text-gray cuIcon-fold"></text>
				<text v-else class="lg text-gray cuIcon-unfold"></text>
			</view>
		</view>
		<view @click="closes" v-if="selectInd>=0" class="popup">
			<view @click.stop class="popup-con flex flex-direction">
				<view v-if="selectInd==0" class="popup-content flex">
					<view class="flex flex-direction">
						<block v-for="(item,index) in selectList1" :key="index">
							<view @click="select1(index,item.category_id)" :class="item.isSelect?'popup-list-action':''" class="popup-list flex align-center justify-between">
								<text>{{item.title}}</text>
								<text class="lg cuIcon-check"></text>
							</view>
						</block>
					</view>
					<view class="flex flex-direction">
						<block v-for="(item,index) in selectList2" :key="index">
							<view @click="select2(index,item.id)" :class="item.isSelect?'popup-list-action':''" class="popup-list flex align-center justify-between">
								<text>{{item.title}}</text>
								<text class="lg cuIcon-check"></text>
							</view>
						</block>
					</view>
				</view>
				<view v-if="selectInd==1" class="popup-content">
					<view class="flex flex-direction">
						<block v-for="(item,index) in selectList3" :key="index">
							<view @click="select3(index,item.price_id)" :class="item.isSelect?'popup-list-action':''" class="popup-list flex align-center justify-between">
								<text>{{item.title}}</text>
								<text class="lg cuIcon-check"></text>
							</view>
						</block>
					</view>
				</view>
				<view v-if="selectInd==2" class="popup-content">
					<view class="flex flex-direction">
						<block v-for="(item,index) in selectList4" :key="index">
							<view @click="select4(index,item.brand_id)" :class="item.isSelect?'popup-list-action':''" class="popup-list flex align-center justify-between">
								<text>{{item.title}}</text>
								<text class="lg cuIcon-check"></text>
							</view>
						</block>
					</view>
				</view>
				<view class="pop-btn flex align-center justify-center">
					<view @click="resetpupo">重置</view>
					<view @click="changepupo">确定</view>
				</view>
			</view>
		</view>
		<view v-if="changePattern" class="content">
			<view class="recommend-con flex align-center justify-between flex-wrap">
				<block v-for="(item,index) in seachList">
					<view class="recommend-item flex flex-direction" @tap='toGoodsDetail(item)'>
						<image class="recommend-img1" :src="item.img_url" mode="aspectFit"></image>
						<text>{{item.title}}</text>
						<view class="recommend-bto flex align-center justify-between">
							<text class="text-price"> {{item.price}}</text>
							<view class="flex align-center justify-center">
								<text class="lg cuIcon-cart"></text>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view v-else class="list">
			<block v-for="(item,index) in seachList" :key="index">
				<view class="item flex align-center" @tap='toGoodsDetail(item)'>
					<image :src="item.img_url" mode="aspectFit"></image>
					<view class="item-left flex flex-direction justify-center">
						<text>{{item.title}}</text>
						<view class="flex align-end">
							<text class="text-price"> {{item.price}} </text>
							<text>{{item.sales}}人已付款</text>
						</view>
					</view>
				</view>
			</block>
			
		</view>
		<view class="flex solid-bottom padding justify-center">
			<text class="loadMore">{{loadStr}}</text>
		</view>
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	export default {
		data() {
			return {
				refreshing: false,
				loadStr:'加载中...',
				fetchPageNum: 1,
				searchKey:'',
				seachList:[],
				brand_id:0,
				price_id:0,
				category_id:0,
				changePattern:false,
				selectInd:-1,
				sort:1,
				selectList1:[],
				selectList2:[],
				selectList3:[],
				selectList4:[]
			}
		},
		onLoad(opt) {
			if(opt.key){
				this.searchKey = opt.key
			}
			if(opt.category_id){
				this.category_id = opt.category_id
			}
			this.loadSearch();
			this.loadGoodsCategoryList()
			this.selectInd=-1
		},
		onReachBottom() {
			console.log('滑动到页面底部')
			this.loadSearch();
		},
		onPullDownRefresh() {
			console.log('下拉刷新');
			this.refreshing = true;
			this.loadSearch();
			this.loadGoodsCategoryList()
		},
		methods: {
			resetpupo:function(){
				console.log(this.selectList1);
				this.selectList1.forEach((item1,index)=>{
					item1.isSelect=false
				})
				this.selectList1=[].concat(this.selectList1)
				console.log(this.selectList1);
				this.selectList2.forEach((item2,index)=>{
					item2.isSelect=false
				})
				this.selectList2=[].concat(this.selectList2)
			},
			changepupo:function(){
				this.selectInd=-1;
				this.loadSearch();
			},
			setsort:function(type){
				console.log(type);
				switch(type){
				  case "sale":
				    this.sort==4?this.sort=5:this.sort=4;
					break;
				  case "time":
				    this.sort==6?this.sort=7:this.sort=6;
				  	break;
				  case "price":
				    this.sort==2?this.sort=3:this.sort=2;
					break;						
				}
				this.loadSearch();
			},
			loadSearch:function(){
				let page = this.refreshing ? 1 : this.fetchPageNum;
				api.get({
					url:'Goods/GetGoodsList',
					data:{
						price_id:this.price_id,
						brand_id:this.brand_id,
						category_id:this.category_id,
						sort:this.sort,
						seach:this.searchKey,
						page:page,
						pagesize:15
						},
					success:data=>{
						console.log(JSON.stringify(data))
						if(data.ErrCode == 0){
							this.seachList=data.Response
							this.refreshing = false;
							uni.stopPullDownRefresh();
							this.loadStr = ''
						}else if (data.ErrCode == 2) {
							if(page == 1){
								this.seachList=[]
							}
							if (data.ErrMsg == '暂无内容') {
								this.refreshing = false;
								uni.stopPullDownRefresh();
								this.loadStr = '已经到底了'
								return;
							}
						}
					}
				});
			},
			loadGoodsCategoryList:function(){
				api.get({
					url:'Goods/GetGoodsCategoryList',
					data:{
						},
					success:data=>{
						console.log(JSON.stringify(data))
						if(data.ErrCode == 0){
							this.selectList1 = data.Response.dycaregorylist
							this.selectList4 = data.Response.dybrandlist
							this.selectList3 = data.Response.dypriceylist
						}
						
						},
				});
			},
			/**
			 * 跳转到商品详情
			 */
			toGoodsDetail: function(item) {
				console.log(JSON.stringify(item) );
				uni.navigateTo({
					url:"/module/good/goodsDetails/goodsDetails?id="+item.goods_id
				});
			},
			toSearch(){
				uni.navigateTo({
					url:"/module/good/goodsSearch/goodsSearch"
				})
			},
			changeList(){
				this.changePattern=!this.changePattern
			},
			select(ind){
				this.selectInd=ind
			},
			closes(){
				this.selectInd=-1
			},
			select1(ind,cid){
				this.category_id = cid
				this.selectList1.forEach((item,index)=>{
					if(index==ind){
						item.isSelect=true
					}else{
						item.isSelect=false
					}
				})
				this.selectList1=[].concat(this.selectList1)
				//api/
				api.get({
					url:'Goods/GetSmallGoodsCategoryList/'+cid,
					data:{
						},
					success:data=>{
						console.log(JSON.stringify(data))
						this.selectList2 = [];
						if(data.ErrCode == 0){
							this.selectList2 = data.Response;
						}
						
					},
				});
				
			},
			select2(ind,cid){
				this.selectList2.forEach((item,index)=>{
					if(index==ind){
						item.isSelect=true
					}else{
						item.isSelect=false
					}
				})
				this.selectList2=[].concat(this.selectList2)
				this.category_id = cid;
			},
			select3(ind,cid){
				this.selectList3.forEach((item,index)=>{
					if(index==ind){
						item.isSelect=true
					}else{
						item.isSelect=false
					}
				})
				this.selectList3=[].concat(this.selectList3)
				this.price_id = cid;
			},
			select4(ind,cid){
				this.selectList4.forEach((item,index)=>{
					if(index==ind){
						item.isSelect=true
					}else{
						item.isSelect=false
					}
				})
				this.selectList4=[].concat(this.selectList4)
				this.brand_id = cid;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top{
		padding: 0 20upx;
		box-sizing: border-box;
	}
	.top image{
		width: 32upx;
		height: 32upx;
	}
	.content{
		margin-top: 20upx;
		background-color: #fff;
		padding: 0 30upx;
	}
	.recommend-bto >view{
		width: 36upx;
		height: 36upx;
		border-radius: 50%;
		background-color: #fde1e1;
	}
	.recommend-bto >view>text{
		color: #f03737;
		font-size: 20upx;
	}
	.recommend-bto>text{
		font-size: 30upx;
		color: #f03737;
	}
	.recommend-img1{
		width: 330upx;
		height: 330upx;
	}
	.recommend-img2{
		width: 160upx;
		height: 160upx;
	}
	.recommend-item>text{
		font-size: 22upx;
		color: #666666;
		margin-top: 6upx;
	}
	.recommend-item{
		margin-bottom: 24upx;
	}
	.recommend{
		margin-top: 20upx;
		background-color: #fff;
		padding: 0 30upx 0 30upx;
		box-sizing: border-box;
	}
	.pop-btn{
		width: 100%;
		border-top: 1upx solid #bbb;
		height: 80upx;
	}
	.pop-btn>view{
		width: 234upx;
		height: 56upx;
		text-align: center;
		line-height: 56upx;
		border-radius: 100upx;
	}
	.pop-btn>view:nth-child(1){
		border: solid 1px #cccccc;
		color: #666666;
	}
	.pop-btn>view:nth-child(2){
		background-color: $btn-bground;
		border: solid 1px $btn-bground;
		color: #fff;
		margin-left: 60upx;
	}
	.popup-content>view{
		width: 50%;
	}
	.popup-list >text:nth-child(1){
			font-size: 26upx;
			color: #666666;
	}
	.popup-list >text:nth-child(2){
			color: #fff;
	}
	.popup-list-action text{
		color: $btn-bground !important;
	}
	.popup-list{
		width: 100%;
		padding: 20upx 64upx 20upx  30upx;
		box-sizing: border-box;
	}
	.popup-content{
		width: 100%;
		height: 320upx;
		overflow-y: scroll;
		padding-top: 20upx;
	}
	.popup-con{
		width: 100%;
		height: 400upx;
		background-color: #fff;
		margin-top: 243upx;
	}
	.popup{
		z-index:888;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.3);
	}
	.select{
		z-index: 999;
		position: fixed;
		top: 168upx;
		height: 76upx;
		width: 100%;
		background-color: #fff;
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
	}
	.select-item{
		width: 120upx;
			height: 50upx;
			border-radius: 25upx;
			border: solid 1upx #dddddd;
			margin-top: 10upx;
	}
	.select-item text{
		line-height: 50upx;
	}
	.select-item text:nth-child(1){
		font-size: 26upx;
			color: #666666;
	}
	.select-item text:nth-child(2){
		color: #b0b0b0;
		margin-left: 8upx;
	}
	.select-action{
		height: 64upx;
		border-radius: 25upx 25upx 0 0;
		border-bottom: solid 1upx #fff;
	}
	.select-action text{
		color: #009829 !important;
	}
	.shaixuan{
		position: fixed;
		top: 88upx;
		z-index: 999;
		height: 80upx;
		width: 100%;
		background-color: #fff;
	}
	.shaixuan>view>text{
		font-size: 28upx;
			color: #000000;
	}
	.shaixuan>view>image{
		width: 15upx;
		height: 18upx;
		margin-left: 15upx;
	}
	.item{
		background-color: #fff;
		height: 205upx;
		padding-left: 10upx;
		box-sizing: border-box;
		margin-bottom:20upx;
	}
	.item-left{
		margin-left: 20upx;
		border-bottom: 1upx solid #dddddd;
		height: 205upx;
	}
	.item-left>text{
		font-size: 28upx;
			color: #000000;
	}
	.item-left>view{
		margin-top: 40upx;
	}
	.item-left>view>text:nth-child(1){
		font-size: 32upx;
			color: #ed0000;
	}
	.item-left>view>text:nth-child(2){
		font-size: 22upx;
			color: #999999;
			margin-left: 16upx;
	}
	.item image{
		width: 266upx;
		height: 200upx;
	}
	.top-search{
			width: 598upx;
			height: 56upx;
			background-color: #ffffff;
			border-radius: 27upx;
			border: solid 1upx #dddddd;
			padding: 0 26upx;
			box-sizing: border-box;
	}
	.top-search{
		font-size:24upx;
	}
	.top{
		position: fixed;
		top: 0;
		z-index: 999;
		width: 100%;
		height: 88upx;
		background-color: $btn-bground;
	}
</style>
